<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-animation-group" extends="polymer-animation" on-animationchange="onAnimationChange">
  <script>
    (function() {
      var ANIMATION_GROUPS = {
        'par': ParGroup,
        'seq': SeqGroup
      };
      /**
       * @module Animation
       */
      /**
       * Component for a group of animations.
       *
       * A fade in and move animation in sequence:
       *
       *     <polymer-animation-group type="seq">
       *       <polymer-animation>
       *         <polymer-animation-prop name="opacity">
       *           <polymer-animation-keyframe value="0.5" offset="0"></polymer-animation-keyframe>
       *           <polymer-animation-keyframe value="1" offset="1"></polymer-animation-keyframe>
       *         <polymer-animation-prop>
       *       </polymer-animation>
       *       <polymer-animation>
       *         <polymer-animation-prop name="transform">
       *           <polymer-animation-keyframe value="translateX(0)" offset="0"></polymer-animation-keyframe>
       *           <polymer-animation-keyframe value="translateX(100px)" offset="1"></polymer-animation-keyframe>
       *         <polymer-animation-prop>
       *       </polymer-animation>
       *     </polymer-animation-group>
       * @class polymer-animation-group
       */
      Polymer('polymer-animation-group', {
        /**
         * If specified the target will be assigned to all child animations.
         * @property target
         * @type HTMLElement|Node
         * @optional
         */
        publish: {
          targetSelector: '',
          target: null,
          duration: null,
          /**
           * Group type. 'par' for parallel and 'seq' for sequence.
           * @property type
           * @type String
           */
          type: 'par'
        },
        ready: function() {
          // TODO: need to do this for now.
          this.super();
        },
        makeAnimation: function() {
          return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
        },
        completeApply: function() {
          this.doOnChildren(function(c) {
            c.completeApply();
          });
          Platform.flush();
          this.super();
        },
        onAnimationChange: function(inEvent, inSender) {
          if (inSender !== this) {
            this.asyncApply();
          }
        },
        typeChanged: function() {
          this.asyncApply();
        },
        targetChanged: function() {
          this.doOnChildren(function(c) {
            c.target = this.target;
          }.bind(this));
        },
        doOnChildren: function(inFn) {
          var children = this.children;
          if (!children.length) {
            children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
          }
          Array.prototype.forEach.call(children, function(c) {
            // TODO <template> in the way
            c.apply && inFn(c);
          }, this);
        },
        get childAnimations() {
          var list = [];
          this.doOnChildren(function(c) {
            if (c.animation) {
              list.push(c.animation);
            }
          });
          return list;
        }
      });
    })();
  </script>
</polymer-element>
